<template>
<div>
    <div class="box">
        <div class="top">
            <div class="avatar" @click="tologin()">
                <div v-if="getuser()">
                   <img src="../../assets/img.jpg" alt=""> 
                </div>
                <div v-else>
                    <img src="../../assets/avatar.webp" alt="">
                </div>
            </div>
            <div class="userinfo" @click="tologin()">
                <div v-if="getuser()">
                    <p>{{nickname}}</p>
                    <p>{{username}}</p>
                </div>
                <div v-else>
                    <p>登录</p>
                    <p>我的账号</p>
                </div>

            </div>
            <div class="set">
                <img src="../../assets/set.webp" alt="">
            </div>
        </div>

        <div class="mid">
            <van-tabbar v-model="active">
                <van-tabbar-item name="payment" icon="pending-payment">待支付</van-tabbar-item>
                <van-tabbar-item name="bag" icon="bag-o">待取货</van-tabbar-item>
                <van-tabbar-item name="comment" icon="comment-o">待评价</van-tabbar-item>
                <van-tabbar-item name="sale" icon="after-sale">退款/售后</van-tabbar-item>
                <van-tabbar-item name="orders" icon="orders-o">全部订单</van-tabbar-item>
            </van-tabbar>
        </div>
        <div class="middel">
            <van-tabbar v-model="active">
                <van-tabbar-item name="cashback" icon="cash-back-record">天天返现</van-tabbar-item>
                <van-tabbar-item name="egg" icon="gift-o">领礼物</van-tabbar-item>
                <van-tabbar-item name="money" icon="bill-o">天天赚钱</van-tabbar-item>
                <van-tabbar-item name="sign" icon="sign">签到领钱</van-tabbar-item>
            </van-tabbar>
        </div>

        <img class="img" src="../../assets/优选.webp" alt="">

        <div class="bottom-up">
            <van-tabbar v-model="active" >
                <van-tabbar-item name="contact" icon="contact">提货人管理</van-tabbar-item>
                <van-tabbar-item name="records" icon="records">意见反馈</van-tabbar-item>
                <van-tabbar-item name="friends" icon="friends-o">商家招募</van-tabbar-item>
                <van-tabbar-item name="goods-collect" icon="goods-collect-o">我的收藏</van-tabbar-item>
            </van-tabbar>
        </div>
        <div class="bottom-down">
            <van-tabbar v-model="active" >
                <van-tabbar-item name="description" icon="description">规则中心</van-tabbar-item>
                <van-tabbar-item name="service" icon="service-o">客服咨询</van-tabbar-item>
                <van-tabbar-item name="setting" icon="setting-o">设置</van-tabbar-item>
                <van-tabbar-item name="more" icon="ellipsis">更多</van-tabbar-item>
            </van-tabbar>
        </div>

    </div>
    <Myfooter />
    
</div>
</template>

<script>
import Myfooter from '@/components/Myfooter'
import {getCookie} from '@/utils/cookie'
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
    components: {
        Myfooter: Myfooter
    },
    data () {
        return {
            username: '',
            nickname: '',
            active: '',
        }
    },
    methods: {
        tologin() {
            // 跳转页面
            this.$router.push('/my/login')
        },
        getuser() {
            if (getCookie('username')) {
                this.username = getCookie('username')
                this.nickname = getCookie('nickname')
                return true
            } 
            return false
        }
    }
}
</script>

<style scoped>
.box{
    padding: 10px;
    background-color: rgb(246, 246, 246);
}
.top{
    height: 100px;
    display: flex;
    justify-content: start;
    align-items: center;
}
.avatar img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.set img{
    width: 30px;
    height: 30px;
}
.top .userinfo{
    flex: 1;
}
.top .avatar{
    margin-right: 20px;
    margin-top: 10px;
}
.top .set{
    margin-top: 10px;
    margin-right: 20px;
}

.mid .van-tabbar{
    position:static;
    margin: 20px 10px;
    width: 95%;
    height: 60px;
    border-radius: 10px;
}

.middel .van-tabbar{
    position:static;
    margin: 20px 10px;
    width: 95%;
    height: 60px;
    border-radius: 10px;
}

.bottom-up .van-tabbar{
    position:static;
    margin: 20px 10px;
    width: 95%;
    height: 60px;
    border-radius: 10px;
}
.bottom-down .van-tabbar{
    position:static;
    margin: 20px 10px;
    width: 95%;
    height: 60px;
    border-radius: 10px;
    margin-bottom: 50px;
}

.img{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 110px;
    background: rgb(246, 246, 246);
}
</style>